<div th:fragment="atmLeft">
    <div class="body-left bgff" id="menuLeft">
        <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
            <el-submenu index="1" v-for="firstMenu in userMenus">
                <template slot="title">
                    <i class="el-icon-user"></i>
                    <span>{{firstMenu.navName}}</span>
                </template>
                <el-submenu index="1-4" v-for="secondMenu in firstMenu.childs">
                    <template slot="title">{{secondMenu.navName}}</template>
                    <el-menu-item index="1-4-1" v-for="thirdMenu in secondMenu.childs">{{thirdMenu.navName}}</el-menu-item>
                </el-submenu>
            </el-submenu>
        </el-menu>
    </div>
    <script>
        var leftVue = new Vue({
            el:'#menuLeft',
            data : {
                userMenus : []
            },
            created : function () {
                loadUserMenu();
            }
        })
        function loadUserMenu() {
            dayuanit.ajax('/loadNav', {}, function (result) {
                leftVue.userMenus = result.data;
            })
        }
    </script>
</div>
